<template>
  <div>
    <a-row>
      <a-col :offset="4" :span="12">
        <a-card title="设置客户商品价格">
          <a-form v-bind="layout">
            <a-form-item label="选择客户" required>
              <customer-selection @customerSelected="customerSelected" />
            </a-form-item>

            <a-form-item :wrapper-col="{ span: 14, offset: 8 }">
              <a-button type="primary">确定</a-button>
              <a-button style="margin-left: 30px">重置</a-button>
            </a-form-item>
          </a-form>
          <a-tabs type="card">
            <a-tab-pane key="1" tab="商品价格组">
              <a-row>
                <a-col :span="8" :offset="16" style="text-align: right">
                  <a-space>
                    <a-button type="link" :disabled="!checkGroupSelected" @click="addNewLine"
                      >添加价格组
                    </a-button>
                  </a-space>
                </a-col>
              </a-row>
              <a-table
                :columns="priceColumns"
                :data-source="priceGroupDataSet"
                :pagination="false"
              />
            </a-tab-pane>
            <a-tab-pane key="2" tab="商品价格">
              <a-row>
                <a-col :span="8" :offset="16" style="text-align: right">
                  <a-space>
                    <a-button type="link" :disabled="!checkGroupSelected" @click="addNewLine"
                      >添加商品
                    </a-button>
                  </a-space>
                </a-col>
              </a-row>
              <a-table
                :columns="priceColumns"
                :data-source="productPriceDataSet"
                :pagination="false"
              >
                <template #productId="{ text, record }">
                  <a-select
                    v-if="record.key === editingKey"
                    v-model:value="record.productId"
                    style="width: 200px"
                    @select="productSelected"
                  >
                    <template #notFoundContent>
                      <a-spin v-if="fetching" # size="small" />
                    </template>
                    <a-select-option v-for="d in allProducts" :key="d.uid" :disabled="d.disabled">
                      <span>{{ d.name }}</span
                      ><span style="color: #bbbbbb; margin-left: 5px">{{ d.brand.name }}</span>
                    </a-select-option>
                  </a-select>
                  <template v-else>
                    <span>{{ record.productName }}</span>
                  </template>
                </template>

                <template #unitId="{ text, record }">
                  <a-select
                    v-if="record.key === editingKey"
                    v-model:value="record.unitId"
                    style="width: 200px"
                    @select="unitSelected"
                  >
                    <a-select-option v-for="d in unitSearchResult[record.key]" :key="d.uid">
                      <span>{{ d.name }}</span
                      ><span v-if="d.isPrimary" style="color: #bbbbbb; margin-left: 5px"
                        >主单位</span
                      >
                    </a-select-option>
                  </a-select>
                  <template v-else>
                    <span>{{ record.unitName }}</span>
                  </template>
                </template>

                <template #price="{ text, record }">
                  <a-input-number v-if="record.key === editingKey" v-model:value="record.price" />
                  <span v-else>{{ text }}</span>
                </template>

                <template #action="{ text, record }">
                  <template v-if="record.editable">
                    <a-button v-if="record.key === editingKey" type="link" @click="save(record.key)"
                      >保存
                    </a-button>
                    <a-button v-else @click="edit(record.key)">编辑</a-button>
                    <a-button type="link" @click="remove(record.key)">删除</a-button>
                  </template>
                </template>
              </a-table>
            </a-tab-pane>
          </a-tabs>
        </a-card>
      </a-col>
    </a-row>
  </div>
</template>

<script lang="ts">
import { defineComponent } from 'vue'
import CustomerSelection from '@/components/chunfeng/customer/CustomerSelection.vue'
import { useCustomerPriceAddFunctions } from '@/views/sale/customer-price/add/index'

export default defineComponent({
  name: 'CustomerProductPriceAdd',
  components: { CustomerSelection },
  setup() {
    const {
      priceColumns,
      addNewLine,
      editingKey,

      edit,

      fetching,
      checkGroupSelected,
      customerSelected,
      priceGroupDataSet,
      productPriceDataSet,
    } = useCustomerPriceAddFunctions()

    const layout = {
      labelCol: { span: 4 },
      wrapperCol: { span: 14 },
    }

    return {
      layout,
      priceColumns,
      addNewLine,
      editingKey,
      edit,
      fetching,
      checkGroupSelected,
      customerSelected,
      priceGroupDataSet,
      productPriceDataSet,
    }
  },
})
</script>
